import React, { PureComponent, Fragment } from 'react';
import { Form, Checkbox } from 'antd';
import { connect } from 'dva';
import { bus } from "../../utils/bus"
const CheckboxGroup = Checkbox.Group;
/***
 * 
 * station=>x;elevation=>y1;ground_elevation=>y2
 */
class IconmultiSelect extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            checkedList:[],
            reinforcementGrade: [],
        }
        this.onConfirm = this.onConfirm.bind(this)
        this.onChange = this.onChange.bind(this)
    }

    async componentDidMount() {
        let { dictlist, extra,onLoaded } = this.props
        if (onLoaded) {
           onLoaded(this);
        }
        this.setState({
            checkedList: extra.irons.split(",") || [],
            reinforcementGrade: dictlist.filter(item => item.dictType == "reinforcement_grade").map(item => item.dictLabel)
        })

    }
    onConfirm(params = {}) {
        const form = this.props.form
        return new Promise((resolve, reject) => {
            form.validateFields((error, values) => {
                if (!error) {
                    const iron = values.iron;
                    bus.emit("ironSelect", iron)
                    if (params.onSuccess) {
                        params.onSuccess('success');
                    }
                    resolve()
                } else {

                    if (params.onError) {
                        params.onError('error');
                    }
                    reject()
                }
            });
        })

    }

    onChange = checkedList => {
        this.setState({
            checkedList,
        });
    };
    render() {
        const {
            form = {},
            mode = 'add',

        } = this.props;
        const { getFieldDecorator } = form;
        const { reinforcementGrade,checkedList } = this.state
        return (
            <Form style={{ marginTop: "30px" }}
                labelAlign="right"

                labelCol={{ span: 10 }}
                wrapperCol={{ span: 14 }}
            >

                <Form.Item style={{ width: "100%" }} label="请选择钢筋等级(多选)">
                    {getFieldDecorator('iron', {
                        rules: [
                            { required: true, message: '请至少选择一项钢筋等级' }
                        ],
                        initialValue:checkedList
                    })(
                        <CheckboxGroup
                            options={reinforcementGrade}
                            onChange={this.onChange}
                        />
                    )}
                </Form.Item>


            </Form>
        );
    }
}

export default connect(
    ({
        dict: { dictlist }
    }) => {
        return { dictlist };
    },
    dispatch => ({

    })
)(Form.create('spansConfig', {

})(IconmultiSelect));